<template>
  <div class="polarListContent">
    <navigator
        :title="'极豆明细'"
        :title_back="'rgb(253, 119, 63)'"
    ></navigator>
    <div class="container">
            <div class="title">
                极豆余额
            </div>
            <div class="polar">
                <span class="icon">
                    🍄
                </span>
                <span class="big">
                   {{ userInfo.polarBean.split('.')[0] }}.
                </span>
                <span class="small">
                    {{ userInfo.polarBean.split('.')[1] }}
                </span>
            </div>
            <div class="plate">
                <span class="plateTitle">
                    今日收入
                </span>
                <span>
                    <span class="plateIcon">
                        🍄
                    </span>
                    <span class="platePrice">
                        {{ result.nowCount.toFixed(2) }}
                    </span>
                </span>
            </div>
        </div>
        <div class="polarTitle">
            极豆明细
        </div>
        <div class="polarList">
            <div class="list" v-for="item in result.result" :key="item.ID">
                <div class="left">
                    <div class="title">
                        {{ item.message }}
                    </div>
                    <div class="desc">
                        {{ tempStep(item.createTime) }}
                    </div>
                </div>
                <div class="right">
                    {{item.type == 0 ? '-' : '+'}}{{ item.count }}
                </div>
            </div>
        </div>
  </div>
</template>

<script>
// 导入导航组件
import navigator from '@/components/nav-head'

import {
    getPolarList
} from '@/api'
export default {
    components: {
        navigator
    },
    data() {
        return {
            userInfo: JSON.parse(localStorage.getItem('userInfo')),
            result: {
                // 今日获取的极豆
                nowCount: 0,
                // 极豆明细数据
                result: []
            }
        }
    },
    created(){
        this.getList()
    },
    methods:{
        getList(){
            getPolarList().then(res => {
                console.log(res.data);
                if(res.data.code == 1){
                    this.result = res.data.result;
                }
            })
        },
        // 时间转换方式
        tempStep(time){
            return new Date(time).toLocaleString()
        }
    }
}
</script>

<style lang="scss" scoped>
    .polarListContent{
        padding-top: 44px;
        min-height: calc(100vh);
        background-image: linear-gradient(to bottom,rgb(253,119,63),rgb(254,236,229));
        .container{
            width: 88%;
            height: 180px;
            padding: 10px;
            margin-left: 6%;
            margin-top: 30px;
            background-color: rgb(255,255,255,0.25);
            border-radius: 7px;
            border: 1px solid rgba(255,255,255,0.5);
            color: rgb(106,60,23);
            .title{
                height: 30px;
                line-height: 30px;
                font-size: 15px;
                font-weight: bold;
            }
            .polar{
                height: 40px;
                line-height: 40px;
                font-size: 12px;
                font-weight: bold;
                letter-spacing: 0;
                .big{
                    font-size: 29px;
                    margin-left: 5px;
                }
                .small{
                    font-size: 20px;
                }
            }
            .plate{
                display: flex;
                flex-direction: column;
                height: 60px;
                line-height: 30px;
                margin-top: 20px;
                span{
                    height: 30px;
                    display: inline-block;
                }
                .plateTitle{
                    font-weight: bold;
                    font-size: 13px;
                    line-height: 40px;
                    text-indent: 1.5em;
                }
                .plateIcon{
                    font-size: 12px;
                    margin-right: 5px;
                }
                .platePrice{
                    font-size: 18px;
                    font-weight: bold;
                    color: rgb(103, 56, 18);
                }
            }
        }
        .polarTitle,
        .polarList{
            width: 88%;
            margin-left: 6%;
        }
        .polarTitle{
            height: 50px;
            line-height: 60px;
            color: #fff;
            font-size: 16px;
        }
        .polarList{
            height: calc(100vh - 334px);
            background-color: #fff;
            border-radius: 7px;
            padding: 10px;
            .list{
                height: 60px;
                padding: 5px;
                line-height: 50px;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #eee;
                .left{
                    width: 70%;
                    line-height: 25px;
                    .title{
                        color: rgb(106,60,23);
                        font-weight: bold;
                        font-size: 15px;
                    }
                    .desc{
                        font-size: 12px;
                        color: #999;
                    }
                }
                .right,
                .rightItem{
                    width: 30%;
                    text-align: right;
                    color: rgb(106,60,23);
                    font-weight: bold;
                    font-size: 15px;
                }
                .rightItem{
                    color: rgb(201,57,58);
                }
            }
        }
        .toast{
            text-align: center;
            color: #999;
            line-height: 300px;
        }
    }
</style>